<template>
  <!-- 多选 -->
  <el-form
    ref="form"
    :model="form"
    :disabled="readonly"
    :rules="rules"
    label-width="220px"
  >
    <el-form-item label="题干" prop="stem">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model="form.stem"
        rows="4"
        class="textareaClass"
        placeholder="请输入题干"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12" v-for="(option, index) in form.options" :key="index">
        <el-form-item
          v-for="(option, index) in form.options"
          :key="index"
          :label="'选项' + String.fromCharCode(Number(index + 65)) + '：'"
          prop="questionStem"
        >
          <el-input
            :maxlength="200"
            show-word-limit
            type="textarea"
            v-model="option.questionStems"
            rows="4"
            class="textareaClass"
            placeholder="请输入选项"
          ></el-input>
          <!-- <quillEditor ref="text" style="width:752px;" v-model="option.questionStems" class="myQuillEditor" :options="editorOption" @change="changeQuillEditor" /> -->
          <el-tooltip
            class="item"
            effect="dark"
            content="删除选项"
            placement="top"
          >
            <el-button
              :disabled="form.options.length == 1"
              @click="delOption(index)"
              
              class="delete"
            >
            </el-button>
          </el-tooltip>
          <el-button
            v-show="form.options.length == index + 1"
            size="small"
            type="primary"
            @click="addOption"
            >新增选项</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="正确答案：" prop="answerList">
      <el-checkbox-group v-model="form.answerList">
        <el-checkbox
          v-for="(option, index) in form.options"
          :key="index"
          :label="option.label"
        >
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
const createModalForm = {
  stem: "",
  options: [
    { questionStems: "", label: "A" },
    { questionStems: "", label: "B" },
    { questionStems: "", label: "C" },
    { questionStems: "", label: "D" },
  ],
  answer: "",
}
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  name: "SanyuanMmFrontIndex",
  data() {
    return {
      // 表单校验
      rules: {
        options1: [
          {
            required: true,
            message: "请选择监护人",
            trigger: ["blur", "change"],
          },
        ],
      },
      form: Object.assign({}, createModalForm),
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal)
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    addOption() {
      let label = String.fromCharCode(
        "A".charCodeAt() + this.form.options.length
      )
      this.form.options.push({
        questionStems: "",
        label: label,
      })
    },
    delOption(index) {
      this.form.options.splice(index, 1)
    },

    // 表单重置
    reset() {
      this.form = Object.assign({}, createModalForm)
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false
      this.batchDialog = false
    },

    handleCheckedCitiesChange(value, args) {
      this.form[args.prop] = value.toString().toString()
    },
  },
}
</script>

<style lang="scss" scoped>
.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}
</style>
